<%--
  Created by IntelliJ IDEA.
  User: 喝假酒的ywj
  Date: 2020/3/6
  Time: 20:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>i movie</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/cinema.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-url.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css" />
    <style>
        a,a:hover{
            text-decoration: none;
        }
        .footer{
            background-color: #262426;
            padding: 56px 0;
            min-width: 1200px;
            width: 100%;
            text-align: center;
        }
        .fix{
            position: fixed;
            bottom: 0;
            left: 0;
        }
    </style>
    <script>
        $(function () {
            let cityId = url('?cityId')
            $('#cinemaBrandTags li').click(function () {
                $('#cinemaBrandTags li').removeClass('active');
                $(this).addClass('active');
                $('#pagination').remove();
                //NProgress.start();
                let brand = $(this).data("brand");
                let area = $(this).parent().parent().next().find('li.active').data("area");
                let types = $(this).parent().parent().next().next().find('li.active').text();
                if (types==="全部"){
                    types='';
                }
                localStorage.setItem("cinemaBrand",$(this).index());
                localStorage.setItem("cinemaType",$(this).parent().parent().next().next().find('li.active').index());
                localStorage.setItem("cinemaArea",$(this).parent().parent().next().find('li.active').index());
                console.log(brand,area,types);
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                    async:true,
                    data:{brand:brand,area:area,type:types},
                    dataType: "json",
                    success:function (data) {
                        NProgress.done();
                        var html = template('temp1',{list:data.data.list});
                        $('#cinemaCells').html(html);
                        if(data.data.total!=0){
                            $('#footer').removeClass('fix');
                            if(data.data.list.length<=3){
                                $('#footer').addClass('fix');
                            }
                            $('#pagination1').show();
                            $('#pagination1').bootstrapPaginator({
                                //主版本号
                                bootstrapMajorVersion: 3,
                                //当前页
                                currentPage: data.data.pageNum,
                                //总页数
                                totalPages: data.data.pages,

                                //显示分页条信息
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first":
                                            return "首页";
                                        case "prev":
                                            return "上一页";
                                        case "next":
                                            return "下一页";
                                        case "last":
                                            return "尾页";
                                        case "page":
                                            return page;
                                    }
                                },
                                onPageClicked:function (event, originalEvent, type, page) {
                                    $.ajax({
                                        url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                                        async:true,
                                        data:{brand:brand,area:area,type:types,pageNum:page},
                                        dataType: "json",
                                        success:function (data) {
                                            var html = template('temp1',{list:data.data.list});
                                            $('#cinemaCells').html(html);
                                        }
                                    })
                                },
                            });
                        }else{
                            $('#pagination1').hide();
                            $('#footer').addClass('fix');
                            $('#cinemaCells').html('<div style="margin-top: 30px">暂无数据</div>');
                        }
                    }
                })
            });
            $('#cinemaAreaTags li').click(function () {
                $('#cinemaAreaTags li').removeClass('active');
                $(this).addClass('active');
                $('#pagination').remove();
                NProgress.start();
                let brand = $(this).parent().parent().prev().find('li.active').data("brand");
                let area = $(this).data("area");
                let types = $(this).parent().parent().next().find('li.active').text();
                if (types==="全部"){
                    types='';
                }
                localStorage.setItem("cinemaBrand",$(this).parent().parent().prev().find('li.active').index());
                localStorage.setItem("cinemaType",$(this).parent().parent().next().find('li.active').index());
                localStorage.setItem("cinemaArea",$(this).index());
                console.log(brand,area,types);
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                    async:true,
                    data:{brand:brand,area:area,type:types},
                    dataType: "json",
                    success:function (data) {
                        console.log(data);
                        NProgress.done();
                        var html = template('temp1',{list:data.data.list});
                        $('#cinemaCells').html(html);
                        if(data.data.total!=0){
                            $('#footer').removeClass('fix');
                            if(data.data.list.length<=3){
                                $('#footer').addClass('fix');
                            }
                            $('#pagination1').show();
                            $('#pagination1').bootstrapPaginator({
                                //主版本号
                                bootstrapMajorVersion: 3,
                                //当前页
                                currentPage: data.data.pageNum,
                                //总页数
                                totalPages: data.data.pages,

                                //显示分页条信息
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first":
                                            return "首页";
                                        case "prev":
                                            return "上一页";
                                        case "next":
                                            return "下一页";
                                        case "last":
                                            return "尾页";
                                        case "page":
                                            return page;
                                    }
                                },
                                onPageClicked:function (event, originalEvent, type, page) {
                                    $.ajax({
                                        url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                                        async:true,
                                        data:{brand:brand,area:area,type:types,pageNum:page},
                                        dataType: "json",
                                        success:function (data) {
                                            var html = template('temp1',{list:data.data.list});
                                            $('#cinemaCells').html(html);
                                        }
                                    })
                                },
                            });
                        }else{
                            $('#pagination1').hide();
                            $('#footer').addClass('fix');
                            $('#cinemaCells').html('<div style="margin-top: 30px">暂无数据</div>');
                        }
                    }
                })
            });
            $('#cinemaRoomTypeTags li').click(function () {
                $('#cinemaRoomTypeTags li').removeClass('active');
                $(this).addClass('active');
                $('#pagination').remove();
                NProgress.start();
                let brand = $(this).parent().parent().prev().prev().find('li.active').data("brand");
                let area = $(this).parent().parent().prev().find('li.active').data("area");
                let types = $(this).text();
                if (types==="全部"){
                    types='';
                }
                localStorage.setItem("cinemaBrand",$(this).parent().parent().prev().prev().find('li.active').index());
                localStorage.setItem("cinemaType",$(this).index());
                localStorage.setItem("cinemaArea",$(this).parent().parent().prev().find('li.active').index());
                console.log(brand,area,types);
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                    async:true,
                    data:{brand:brand,area:area,type:types},
                    dataType: "json",
                    success:function (data) {
                        NProgress.done();
                        var html = template('temp1',{list:data.data.list});
                        $('#cinemaCells').html(html);
                        if(data.data.total!=0){
                            $('#footer').removeClass('fix');
                            if(data.data.list.length<=3){
                                $('#footer').addClass('fix');
                            }
                            $('#pagination1').show();
                            $('#pagination1').bootstrapPaginator({
                                //主版本号
                                bootstrapMajorVersion: 3,
                                //当前页
                                currentPage: data.data.pageNum,
                                //总页数
                                totalPages: data.data.pages,

                                //显示分页条信息
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first":
                                            return "首页";
                                        case "prev":
                                            return "上一页";
                                        case "next":
                                            return "下一页";
                                        case "last":
                                            return "尾页";
                                        case "page":
                                            return page;
                                    }
                                },
                                onPageClicked:function (event, originalEvent, type, page) {
                                    $.ajax({
                                        url:'${pageContext.request.contextPath}/front/cinema/getCinemaWithQuery',
                                        async:true,
                                        data:{brand:brand,area:area,type:types,pageNum:page},
                                        dataType: "json",
                                        success:function (data) {
                                            var html = template('temp1',{list:data.data.list});
                                            $('#cinemaCells').html(html);
                                        }
                                    })
                                },
                            });
                        }else{
                            $('#pagination1').hide();
                            $('#footer').addClass('fix');
                            $('#cinemaCells').html('<div style="margin-top: 30px">暂无数据</div>');
                        }
                    }
                })
            });
            if((${cinemas.total})==0){
                $('#pagination').hide()
            }else{
                $('#pagination').bootstrapPaginator({
                    //主版本号
                    bootstrapMajorVersion: 3,
                    //当前页
                    currentPage: ${cinemas.pageNum},
                    //总页数
                    totalPages: ${cinemas.pages},
                    //请求url
                    pageUrl: function (type, page, current) {
                        return '${pageContext.request.contextPath}/front/cinema/cinema?cityId='+cityId+'&pageNum='+page;
                    },
                    //显示分页条信息
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                });
            }
        })
    </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="cinema-container">
    <div class="container">
        <div class="tags-panel">
            <ul class="tags-lines">
                <li class="tags-line">
                    <div class="tags-title">品牌</div>
                    <ul class="tags" id="cinemaBrandTags">
                        <li class="active" data-brand=""><a href="javascript:void(0);">全部</a></li>
                        <c:forEach var="item" items="${data1}">
                            <li data-brand="${item.id}"><a href="javascript:void(0);">${item.brand}</a></li>
                        </c:forEach>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">行政区</div>
                    <ul class="tags" id="cinemaAreaTags">
                        <li class="active" data-area=""><a href="javascript:void(0);">全部</a></li>
                        <c:forEach var="item" items="${data2}">
                            <li data-area="${item.id}"><a href="javascript:void(0);">${item.district}</a></li>
                        </c:forEach>
                    </ul>
                </li>
                <li class="tags-line tags-line-border">
                    <div class="tags-title">特殊厅</div>
                    <ul class="tags" id="cinemaRoomTypeTags">
                        <li class="active"><a href="javascript:void(0);">全部</a></li>
                        <c:forEach var="item" items="${data3}">
                            <li><a href="javascript:void(0);">${item.seat_type}</a></li>
                        </c:forEach>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="cinemas-list">
            <h2 class="cinemas-list-header">影院列表</h2>
            <div id="cinemaCells">
                <c:forEach items="${cinemas.list}" var="item">
                    <div class="cinema-cell">
                        <div class="cinema-info">
                            <a href="${pageContext.request.contextPath}/front/cinema/cinemaDetail?id=${item.id}" class="cinema-name">${item.name}</a>
                            <p class="cinema-address">地址：${item.address}</p>
                        </div>
                        <div class="buy-btn">
                            <a href="${pageContext.request.contextPath}/front/cinema/cinemaDetail?id=${item.id}">选座购票</a>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <nav style="text-align: center">
            <ul class="detail-pager" id="pagination" ></ul>
            <ul class="detail-pager" id="pagination1" ></ul>
        </nav>
    </div>
</div>
<div class="footer" id="footer">
    <!--底部-->
    <span>©2020 i movie电影</span>
</div>
<script id="temp1" type="text/html">
    {{each list item index}}
    <div class="cinema-cell">
        <div class="cinema-info">
            <a href="/cinema-front/front/cinema/cinemaDetail?id={{item.id}}" class="cinema-name">{{item.name}}</a>
            <p class="cinema-address">地址：{{item.address}}</p>
        </div>
        <div class="buy-btn">
            <a href="/cinema-front/front/cinema/cinemaDetail?id={{item.id}}">选座购票</a>
        </div>
    </div>
    {{/each}}
</script>
</body>
</html>
